﻿@using eSeller
@using Eking.Framework
@model eSeller.Models.Product

@{
    var productClasses = "product draggable resizable";

    var p = Model;

    var width = Html.GetUiValue(p.UiData, "Width", "140px");
    var height = Html.GetUiValue(p.UiData, "Height", "140px");
    //var color = Html.GetUiValue(p.UiData, "BgColor", "#2D8AEF");
    var left = Html.GetUiValue(p.UiData, "Left", "0px");
    var top = Html.GetUiValue(p.UiData, "Top", "0px");
    var rateId = "rate_" + p.Id;
    var starter = string.Format("{0:0}px", 90 / 5 * p.VoteScore);
                
    <div class="@productClasses" style="width:@width; height:@height; left:@left; top:@top" data-Id="@p.Id" data-CatId="@p.IdProductCategory">
        <div style="bottom: 0px; display: block; position: absolute; background: rgba(0, 0, 0, 0.4);
            width: 100%; padding: 2px 0px 2px 0px">
            <h2 style="font-family: SegoeUiB; margin: 5px">
                @p.Name
            </h2>
            <div class="rate" id="@rateId" style="margin:5px" data-initVal="@p.VoteScore">
                <div class="statVal">
                    <span class="ui-rater"><span class="ui-rater-starsOff" style="width: 90px;"><span
                                class="ui-rater-starsOn" style="width: @starter"></span></span></span>
                </div>
            </div>
        </div>
    </div> 
}
